<template>
    <base-card>
        <div class="flex header">
            <div class="flex">
                <div class="blue-radius"></div>
                <h2 class="page-title">角色管理</h2>
            </div>
            <el-button type="primary" @click="handleSavePermissions">保存</el-button>
        </div>

        <div class="content">
            <RoleData v-model:selectRoleId="selectRoleId" />
            <Permissions v-model:PermissionsData="PermissionsData" />
        </div>
    </base-card>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import Permissions from './Permissions.vue';
import RoleData from './roleData.vue';
import { addRoleApi, gitPermissionsApi, queryRoleApi, reviseRoleApi, SingleRoleApi } from '../../api/RoleManagement';

//角色
const queryRoleData = ref([]);
//权限
const PermissionsData = ref([])
//选中角色的id
const selectRoleId = ref('')
//侦听
watch(selectRoleId, () => {
    gitPermissions()
    getRole({ _id: selectRoleId.value })
}
);

onMounted(() => {
    gitPermissions()
    getRoleData()

})
//权限
function gitPermissions() {
    gitPermissionsApi().then((res) => {
        if (res.code == 200) {
            PermissionsData.value = res.data.rows
        }
    })
}
//角色
function getRoleData() {
    queryRoleApi().then((res) => {
        if (res.code == 200) {
            queryRoleData.value = res.data.rows
        }
    })
}


//储存点击人的内容
const StoringData = ref({})
//获取点击人的详情
function getRole(_id) {
    SingleRoleApi(_id).then((res) => {
        console.log(selectRoleId.value);
        if (res.code == 200) {
            console.log(res);
            StoringData.value = res.data

        }
    })
}







const handleSavePermissions = () => {
    if (!selectRoleId.value) {
        ElMessage.warning('请先选择一个角色');
        return;
    }
    // 收集选中的权限ID
    const selectedPermissionIds = [];
    PermissionsData.value.forEach(item => {
        if (item.checked) {
            selectedPermissionIds.push(item._id);
        }
        if (item.children) {
            item.children.forEach(child => {
                if (child.checked) {
                    selectedPermissionIds.push(child._id);
                }
            });
        }
    });
    reviseRoleApi({
        _id: StoringData.value._id,
        name: StoringData.value.name,
        permissions: selectedPermissionIds
    }).then((res) => {
        if (res.code === 200) {
            ElMessage.success('权限保存成功');
            getRole(selectRoleId.value);
        }
    })
};



</script>

<style scoped lang="scss">
.header {
    display: flex;
    justify-content: space-between;

    span {
        font: size 18px;
        padding-left: 10px;
        border-left: 9px solid lightblue;
    }
}

.content {
    display: flex;
}

.page-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 550;
    color: #333333E5;
}

.blue-radius {
    border-width: 0px;
    width: 6px;
    height: 20px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-top: 4px;
    margin-right: 10px;
}
</style>
